<template>
    <div class="bigbox">
        <div class="box1">
            <router-link @click.native="kong" to=""></router-link><span>结算页面</span>
        </div>
        <div class="box2">
            <div class="dizhi">
                <div class="ai">
                    <span>地址</span>
                    <span>{{userss}}  {{phone}} </span><p></p>
                </div>
            </div>
                <i class="iconfont iconyoujiantou"></i>
        </div>
        <div class="box3" v-for="(item,index) in jiesuan" :key="index">
            <!--图片-->
            <div class="box-img">
                <img :src="item.src" alt="" id="img1">
            </div>
            <!--右边文字-->
            <div class="box-wen">
                <p id="p1">{{item.title}}</p>
                <p>规格：<span>{{item.span}}</span></p>
                <div id="an1">
                    <!--单价-->
                    <p id="qian1">￥<i>{{item.qian}}</i></p>
                    <!--加减按钮-->
                    <div class="jiajian">
                        <!-- <span class="span1" id="btn1">-</span> -->
                        <span>x</span>
                        <span class="span2">{{item.num}}</span>
                        <!-- <span class="span1">+</span> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="box5">
            <span>购物车小计</span>
            <span>￥{{z}}</span>
        </div>
        <div class="box6">
            <span>快递方式:</span>
            <p><span>免费送货￥0</span><i class="iconfont iconyoujiantou"></i></p>
        </div>
        <div class="box7">
            <span>优惠券:</span>
            <p><span>全场可用(-￥0)</span><i class="iconfont iconyoujiantou"></i></p>
        </div>
        <div class="box8">
            <span>支付方式</span>
            <p><span>微信支付</span><i class="iconfont iconyoujiantou"></i></p>
        </div>
        <div class="box9">
            <span>买家留言</span>
            <input type="text">
        </div>
        <div class="cheng"></div>
        <div class="box10">
            <div>合计：<span>￥{{z}}</span></div>
            <div class="xia" @click="success">下单</div>
        </div>
         <!-- 弹框提示 -->
        <div id="tsk" class="tsk" v-bind:style="{display:blockNone}">
            <p>下单成功！</p>
        </div>
    </div>
</template>

<style lang="less" scoped>
    /*初始化*/
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
        text-decoration: none;
    }
    .box1{
        position: fixed;
        top:0;
        width: 100%;
        height: 50px;
        font-size: 16px;
        text-align: center;
        line-height: 53px;
        border-bottom: 1px solid #d8d8d8;
        /*position: relative;*/
        background: #ffffff;
        span{
            color: #000000;
        }
        a{
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background: url("../../public/img/arrow-left.png") no-repeat center center;
            background-size: 50%;
        }
    }
    .box2{
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
        padding: 12px 20px 6px;
        border-bottom: 1px solid #d8d8d8;
        /*地址*/
        .dizhi{
            color: #000000;
            font-size: 16px;
            .ai{
                span:nth-child(1){
                    color: white;
                    font-size: 14px;
                    background: #cc0000;
                }
                span:nth-child(2){
                    padding-left: 8px;
                }
            }
        }
        i{
            text-align: center;
            width: 23px;
            height: 50px;
            line-height: 50px;
            font-size: 24px;
            font-weight: bold;
        }
    }
    /*第三个*/
    .box3{
        display: flex;
        width: 100%;
        padding: 15px 20px 0;
        font-size: 14px;
        align-items: center;
        border-bottom: 1px solid #d8d8d8;
        img{
            width: 60px;
        }
        .box-img{
            width: 17%;
            height: 100px;
        }
        .box-wen{
            font-size: 14px;
            width: 83%;
            height: 100px;
            margin-left: 20px;
            p:nth-child(1){
                color: #000000;
            }
            p:nth-child(2){
                color: #c4c4c4;
            }
            #an1{
                margin-top: 3px;
                display: flex;
                justify-content: space-between;
                p{
                    color: #cc0000;
                }
                .jiajian{
                    width: 90px;
                    text-align: right;
                    // display: flex;
                    // justify-content: space-evenly;
                    .span1{
                        width: 23px;
                        height: 23px;
                        line-height: 20px;
                        background: #abaaaa;
                        text-align: center;
                        /*border-color:#F1F1F1 ;*/
                        color: white;
                        outline: none;
                        font-size: 20px;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
    /*第四个*/
    .box4{
        display: flex;
        width: 100%;
        padding: 15px 20px 0;
        font-size: 14px;
        align-items: center;
        border-bottom: 10px solid #d8d8d8;
        img{
            width: 60px;
        }
        .box-img{
            width: 17%;
            height: 100px;
        }
        .box-wen{
            font-size: 14px;
            width: 83%;
            height: 100px;
            margin-left: 20px;
            p:nth-child(1){
                color: #000000;
            }
            p:nth-child(2){
                color: #c4c4c4;
            }
            #an2{
                margin-top: 3px;
                display: flex;
                justify-content: space-between;
                p{
                    color: #cc0000;
                }
                .jiajian{
                    width: 90px;
                    text-align: right;
                    // display: flex;
                    // justify-content: space-evenly;
                    .span1{
                        width: 23px;
                        height: 23px;
                        line-height: 20px;
                        background: #abaaaa;
                        text-align: center;
                        /*border-color:#F1F1F1 ;*/
                        color: white;
                        outline: none;
                        font-size: 20px;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
    .box5{
        padding: 13px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        border: 1px solid #d8d8d8;
    }
    .box6 {
        padding: 13px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        border: 1px solid #d8d8d8;
        i {
            font-size: 19px;
        }
    }
    .box7{
        padding: 13px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        border: 1px solid #d8d8d8;
        i{
            font-size:19px ;
        }
    }
    .box8{
        padding: 13px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        border: 1px solid #d8d8d8;
        i{
            font-size:19px ;
        }
    }
    .box9{
        padding: 13px;
        display: flex;
        height: 60px;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        border: 1px solid #d8d8d8;
        i{
            font-size:19px ;
        }
        input{
            width: 224px;
            height: 27px;
        }
    }
    .box10{
        background: white;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 55px;
        line-height: 55px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        div:nth-child(1){
            margin-left: 20px;
        }
        span{
            color: #cc0000;
        }
        .xia{
            color: #ffffff;
            background: #cc0000;
            width: 110px;
            height: 52px;
            line-height: 52px;
            text-align: center;
        }
    }
    .cheng{
        width: 100%;
        height: 240px;
        background: #ecebeb;
    }
    .tsk{
        width: 170px;
        height: 76px;
        line-height: 31px;
        text-align: center;
        background: #000;
        opacity: 0.5;
        color: #c2c5c9;
        font-size: 30px;
        border-radius: 6px;
        position: fixed;
        top: 50%;
        left: 50%;
        font-size: 20px;
        transform: translate(-50%, -50%);
    }
</style>


<script>
export default{
    data(){
        return {
             z:0,//立即购买传到结算页面的总价钱
             userss:'',//用户名
             phone:'',//手机号码
             blockNone:"none",//默认设置为隐藏
            jiesuan:[
                // {
                //     src: "img/aa.jpg",
                //     title: "Leysen小王子的星空 金18k钻石吊坠女 钻石项链女 18K玫瑰金 吊坠",
                //     span:"吊坠",
                //     money: "2998",
                //     num: "1",
                // },
                // {
                //     src: "img/bb.jpg",
                //     title: "Leysen钻石耳坠 18K金钻石耳钉女 女王时刻 群镶钻石耳饰 耳钉+耳坠",
                //     span:"耳钉+耳坠",
                //     money: "4140",
                //     num: "1",
                // },
            ],
        }
    },
    mounted(){
        this.jiesuan=this.$store.state.arr1;//接收index.js中的对象
        if(this.jiesuan!=''){
            // console.log(11);
            //this.z= this.jiesuan[0].zong;//获取总价
            if(this.jiesuan[0].jjj==99){//99拿的是购物车的总价
                 this.z= this.jiesuan[0].zprice
            }else{//88拿的是立即购买的总价
                 this.z= this.jiesuan[0].zong
            }
        }
        //到本地拿数据
        var ff=JSON.parse(localStorage.getItem("user"))
        console.log(ff);
        this.userss=ff.user;
        this.phone=ff.phone;
       
    },
    computed:{
        
    
    },
    methods:{
      kong(){
        //   console.log(222);
          this.jiesuan=[];//单击回退按钮 清空jiesuan数据
          this.z=100;
          this.$router.push({
                name: "Car",
            });//点击回到car页面
        //  location.href="http://localhost:8080/#/car";
          this.$store.commit("add1",111);
      },
      success(){
        this.blockNone="block";//提示框显示
        setTimeout(()=>{
            this.blockNone="none";//
            this.$router.push({path:'/'})
        },2000)//两秒消失
      }
    },
}
</script>